<template>
  <div class="mulu">
    <div class="biaodan">
    <el-form :inline="true" :model="reqparams" class="demo-form-inline">
  <el-form-item label="目录名称">
    <el-input v-model.trim="reqparams.directoryName" placeholder=""></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="reqparams.state" placeholder="请选择">
      <el-option label="启动" value=0></el-option>
      <el-option label="禁用" value=1></el-option>
    </el-select>
  </el-form-item>
  <el-form-item class="chaxun">
    <el-button type="text" @click.native="$router.back()" v-if="backFlag">{{'<-'}}返回学科</el-button>
    <el-button type="success" @click="addDate">新增目录</el-button>
  </el-form-item>
   <el-button @click="qingchu">清除</el-button>
   <el-button type="primary" @click="sousuo">搜索</el-button>
</el-form>
    <el-alert
    :title='shuju'
    type="info"
    show-icon c
    :closable="false"
    lose-text="">
  </el-alert>
  </div>
  <!-- 表单 -->
   <el-table   :data="num"

      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="180" >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="180">
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称">
      </el-table-column>
      <el-table-column

        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期">
        <template v-slot="scope">
          {{$moment(scope.row.addDate).format('YYYY:MM:DD HH:mm:ss')}}
        </template>
      </el-table-column>
       <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
       <el-table-column
        prop="creatorID"
        label="状态">
        <template #default="scope">
          {{scope.row.state===0?'已启用':'已禁用'}}
        </template>
      </el-table-column>
       <el-table-column
        class="color"
        label="操作">
        <template #default="scope">
          <el-button type="text" @click="disableFn(scope.row)">{{scope.row.state==1?'启用':'禁用'}}</el-button>
          <el-button
           type="text"
            @click="xiugai(scope.row)"
           :disabled="scope.row.state===1">修改</el-button>
          <el-button
          type="text"
           @click="del(scope.row)"
           :disabled="scope.row.state===1"
           >删除</el-button>
        </template>
       </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">

    <el-pagination class="fenye"
     :hide-on-single-page='value'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5,10,20,30]"
       :page-size="reqparams.pagesize"
      :total="total"
      layout=" sizes, prev, pager, next, jumper"
      >
    </el-pagination>
  </div>
  <!-- 新增弹窗 -->
  <el-dialog
  :title="textstring"
  :visible.sync="dialogVisible"
  width="30%"
  @open="open"
  @close="close">
 <el-form  label-width="80px" ref="ruleForm" :model="ruleForm"  :rules="rules">
   <el-form-item  prop="xueke"  label-width="80px" label="所属学科">

    <el-select  v-model="ruleForm.xueke" placeholder="可选择" value="">
      <el-option  v-for="item in List" :key="item.tabel" :label="item.label"  :value="item.value"></el-option>

    </el-select>
  </el-form-item>
  <el-form-item  prop="mulu" label-width="80px" label="目录名称">
    <el-input v-model="ruleForm.mulu"></el-input>
  </el-form-item>

</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
</el-dialog>
  </div>

</template>

<script>
// ,add simple , changeState
import { list, remove, add, update, changeState } from '@/api/hmmm/directorys.js'
import { Subsimple as simple } from '@/api/hmmm/subjects'
// import { status } from '@/api/hmmm/constants.js'

export default {
  name: 'test',
  data () {
    return {
      backFlag: false,
      value: false,
      xuekeId: 0,
      updataNumber: 0,
      textstring: '',
      List: [],
      total: null, // 分页
      num: [], // 数据类表
      reqparams: {
        state: null,
        directoryName: null,
        subjectID: null,
        page: 1,
        pagesize: 10 // 页面10调数据
        // keyword:
      },
      dialogVisible: false,
      ruleForm: {
        xueke: '',
        mulu: '',
        id: ''
      },
      shuju: '',
      rules: {
        xueke: [
          { required: true, message: '请输入所选学科', trigger: 'blur' }

        ],
        mulu: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }

        ]
      }
    }
  },

  methods: {
    changeParamsFn (page = 1, pagesize = 10) {
      this.reqparams.page = page
      this.reqparams.pagesize = pagesize
    },
    CountsFlagFn (value) {
      if (value === 1 || value === 0) {
        this.value = true
      } else {
        this.value = false
      }
    },
    // 清除
    qingchu () {
      this.reqparams.directoryName = null
      this.reqparams.state = null
    },
    goFn (res) {
      this.num = res.data.items
      this.total = res.data.counts
      this.shuju = `一共${res.data.counts}数据`
      this.CountsFlagFn(res.data.counts)
    },
    // 搜索
    sousuo () {
      console.log(1)
      console.log('搜索字符串', this.reqparams)
      this.Hlist(this.reqparams)
    },
    // 启动禁用
    disableFn (id) {
      if (id.state === 1) {
        id.state = 0
        changeState(id)
      } else {
        id.state = 1
        changeState(id)
      }
    },
    status (type) {
      const map = {
        2: '已启用',
        3: '已禁用'
      }
      return map[type]
    },
    // 分页
    handleCurrentChange (type) {
      this.reqparams.page = type
      if (this.reqparams.state) {
        this.Hlist(this.reqparams)
        return
      }
      // 跟新列表
      this.Hlist()
    },
    handleSizeChange (type) {
      console.log('sizeChangType', type)
      this.reqparams.pagesize = type
      this.Hlist()
    },
    // 数据列表
    async Hlist () {
      const res = await list(this.reqparams)
      console.log(res)
      this.num = res.data.items
      this.total = res.data.counts
      this.shuju = `一共${this.total}条数据`
    },
    // 删除
    del (object) {
      this.$confirm('确定要删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(14)
        await remove(object)
        // 更新列表
        this.Hlist()
        this.$message.success('删除成功')
      }).catch(() => {

      })
    },
    // 弹窗
    addDate () {
      this.dialogVisible = true
      this.textstring = '新增目录'
    },
    close () {
      this.dialogVisible = false
      this.ruleForm.mulu = ''
      this.ruleForm.xueke = ''
    },
    open () {
      simple().then((res) => {
        console.log(res)
        this.List = res.data
      })

      this.Hlist()
    },
    // 确定
    confirm () {
      this.$refs.ruleForm.validate(async (value) => {
        if (value) {
          if (this.textstring !== '新增目录') {
            // console.log(1)
            if (typeof this.ruleForm.xueke === 'string') {
              this.ruleForm.xueke = this.xuekeId
            }
            await update({
              subjectID: this.ruleForm.xueke,
              directoryName: this.ruleForm.mulu,
              id: this.updataNumber
            })
            this.$message.success('编辑成功')
            this.Hlist()
            this.ruleForm.mulu = ''
            this.ruleForm.xueke = ''
            this.dialogVisible = false
          } else {
            await add({
              subjectID: Number(this.ruleForm.xueke),
              directoryName: this.ruleForm.mulu,
              id: null
            })
            // console.log(1)
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.Hlist()
            this.ruleForm.mulu = ''
            this.ruleForm.xueke = ''
          }
        }
      })
    },
    // 修改
    xiugai (data) {
      console.log('data数据', data)
      // 修改表单显示
      this.dialogVisible = true
      // 设置外部变量   设置修改id
      this.updataNumber = data.id
      // 修改对应
      this.textstring = '修改目录'
      // 设置表单 select默认选中 (使用传入数据的 subjectName设置 (对应学科名称 ))
      this.ruleForm.xueke = data.subjectName// 对应 ruleFrom.xueke   是strinig类型
      // 1.点击表单 不操作 默认 为string类型
      // 2.修改对应 学科列表  为对应学科 id
      this.ruleForm.mulu = data.directoryName
      // 设置外部   (用于用户点击 并不修改)
      this.xuekeId = data.subjectID
      // const res = update(object)
      // console.log(res)
      // this.$refs.addDepart.getDetail(object)
    }
  },
  mounted () {
    if (this.$route.query.id) {
      console.log('id', this.$route.query.id)
      this.reqparams.subjectID = this.$route.query.id
      this.backFlag = true
      this.Hlist()
      return
    }
    this.Hlist()
  }

}

</script>

<style scoped>
.color{
  margin: 0 10px 0 10px;
}
.mulu{
  width: 99%;
  height: 100%;
  background: #fff;

}
.biaodan{
  /* margin-top: 20px; */
  margin-left: 20px;
  padding-top: 20px;
}
.chaxun{
  /* padding-right: 20; */
  float: right;
}
 .fenye{
  float: right;
}
</style>
